<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>multiscroll.js - split multi-scrolling pages plugin</title>
    <meta name="author" content="Alvaro Trigo Lopez" />
    <meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
    <meta name="keywords"  content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
    <meta name="Resource-type" content="Document" />


    <link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
    <link rel="stylesheet" type="text/css" href="examples.css" />

    <script
	src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous"></script>
    <script type="text/javascript" src="../jquery.multiscroll.js"></script>

    <script type="text/javascript">
     $(document).ready(function() {
            $('#myContainer').multiscroll({
                sectionsColor: ['#00b3d7', '#ed2', '#ff73a1'],
                anchors: ['first', 'second', 'third'],
                menu: '#menu',
                navigation: true,
                navigationTooltips: ['One', 'Two', 'Three'],
                loopBottom: true,
                loopTop: true
            });
        });
    </script>
</head>
<body>


<ul id="menu">
    <li data-menuanchor="first"><a href="#first">First slide</a></li>
    <li data-menuanchor="second"><a href="#second">Second slide</a></li>
    <li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section" id="left1">
            <h1>Left 1</h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>

        <div class="ms-section" id="left3">
            <h1>Left 3</h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>

        <div class="ms-section" id="right3">
            <h1>Right 3</h1>
        </div>
    </div>
</div>

</body>
</html>
